import { defineComponent, h, Ref, ref } from 'vue'
import {
  NButton,
  NCard,
  NDataTable,
  NForm,
  NFormItem,
  NInput,
  NPagination,
  NSelect,
  NSpace,
  NTag,
  NTree,
  useMessage
} from 'naive-ui'
import type { DataTableColumns } from 'naive-ui'
import styles from './index.module.scss'
import { DataItemType, SearchFormType, SelectOptionsType } from './types'
import {
  getOrganizationList,
  getOrganizationTree
} from '@/service/modules/organization'

const organization = defineComponent({
  name: 'organization',
  setup() {
    const handleList = function () {
      pagination.value.loading = true
      getOrganizationList(
        // @ts-ignore
        searchForm.value,
        pagination.value.page,
        pagination.value.pageSize
      )
        .then((res: any) => {
          // @ts-ignore
          dataList.value = res.totalList
          // @ts-ignore
          pagination.value.pageCount = Math.ceil(
            res.total / pagination.value.pageSize
          )
          pagination.value.loading = false
        })
        .catch((err: any) => {
          message.error(err.msg ? err.msg : '接口未知错误')
          pagination.value.loading = false
        })
    }

    // @ts-ignore
    const searchForm: Ref<SearchFormType> = ref({
      organname: '',
      organIds: '',
      isdelete: ''
    })

    const pagination = ref({
      pageSize: 10,
      pageCount: 0,
      page: 1,
      showQuickJumper: true,
      pageSizes: [10, 30, 50],
      showSizePicker: true,
      loading: false,
      onUpdatePage: (page: number) => {
        pagination.value.page = page
        handleList()
      },
      onUpdatePageSize: (pageSize: number) => {
        pagination.value.pageSize = pageSize
        pagination.value.page = 1
        handleList()
      }
    })

    handleList()

    const message = useMessage()

    const createColumns = (): DataTableColumns<DataItemType> => {
      return [
        { title: '单位', key: 'organname' },
        {
          title: '状态',
          key: 'isdelete',
          render(row: any) {
            return h(
              // @ts-ignore
              NTag,
              {
                type: row.isdelete == 0 ? 'success' : 'error'
              },
              {
                default: () => (row.isdelete == 0 ? '启用' : '禁用')
              }
            )
          }
        },
        { title: '创建人', key: 'createBy' },
        { title: '创建时间', key: 'startdate' }
      ]
    }

    // @ts-ignore
    const dataList: DataItemType[] = ref()

    // @ts-ignore
    const statusOptions: SelectOptionsType = [
      {
        label: '启用',
        value: '0'
      },
      {
        label: '禁用',
        value: '1'
      }
    ]

    const submit = function () {
      handleList()
    }

    const reset = function () {
      searchForm.value.organname = ''
      searchForm.value.isdelete = ''
      handleList()
    }

    const updateCheckedKeys = function (keys: string[]) {
      // @ts-ignore
      searchForm.value.organIds = keys.join(',')
      handleList()
    }

    const treeData = ref()

    getOrganizationTree().then((res: any) => {
      treeData.value = res
    })

    return {
      // @ts-ignore
      columns: createColumns(),
      dataList,
      pagination,
      searchForm,
      statusOptions,
      submit,
      reset,
      message,
      treeData: treeData,
      updateCheckedKeys
    }
  },
  render() {
    return (
      <NCard>
        <div class={styles['organization-main']}>
          <NCard class={styles['tree-main']} hoverable title={'组织机构管理'}>
            <NTree
              block-line
              data={this.treeData}
              checkable
              expand-on-click
              selectable
              virtual-scroll
              class={styles['tree-main-data']}
              onUpdateCheckedKeys={this.updateCheckedKeys}
              keyField={'organid'}
              labelField={'organname'}
            ></NTree>
          </NCard>
          <div class={styles['table-main']}>
            <NSpace vertical>
              <NCard hoverable>
                <NForm
                  label-width={'auto'}
                  label-placement={'left'}
                  model={this.searchForm}
                  inline
                >
                  <NFormItem label={'单位名称'} path={'organname'}>
                    <NInput
                      v-model:value={this.searchForm.organname}
                      placeholder={'请输入单位名称'}
                    ></NInput>
                  </NFormItem>
                  <NFormItem label={'状态'} path={'isdelete'}>
                    <NSelect
                      class={styles['select-item']}
                      v-model:value={this.searchForm.isdelete}
                      placeholder={'请选择状态'}
                      // @ts-ignore
                      options={this.statusOptions}
                    ></NSelect>
                  </NFormItem>
                  <NFormItem>
                    <NButton
                      attr-type={'button'}
                      type={'primary'}
                      onClick={this.submit}
                    >
                      搜索
                    </NButton>
                  </NFormItem>
                  <NFormItem>
                    <NButton
                      attr-type={'button'}
                      type={'tertiary'}
                      onClick={this.reset}
                    >
                      清空
                    </NButton>
                  </NFormItem>
                </NForm>
              </NCard>
              <NCard hoverable>
                <NDataTable
                  // @ts-ignore
                  columns={this.columns}
                  data={this.dataList}
                  loading={this.pagination.loading}
                ></NDataTable>
                <NPagination
                  class={styles['page-position']}
                  display-order={['quick-jumper', 'pages', 'size-picker']}
                  page-count={this.pagination.pageCount}
                  page-size={this.pagination.pageSize}
                  page-sizes={this.pagination.pageSizes}
                  page={this.pagination.page}
                  on-update:page={this.pagination.onUpdatePage}
                  on-update:page-size={this.pagination.onUpdatePageSize}
                  show-quick-jumper
                  show-size-picker
                ></NPagination>
              </NCard>
            </NSpace>
          </div>
        </div>
      </NCard>
    )
  }
})

export default organization
